<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
var ctx;
var lc = 'rgb(0,0,0)'; // 선색
var bc = 'rgb(255,255,255)'; // 바탕색
var h  = 1;  // 호의길이
var ra = 100; // 반지름
var d  = true;  // 방향

window.onload = function(){
	ctx = document.getElementById('canvas').getContext('2d');
	var btnBc = document.getElementById('backColor');
	var btnLc = document.getElementById('lineColor');
	var btnRa = document.getElementById('radius');
	var btnHo = document.getElementById('ho');
	var btnRight = document.getElementById('right');
	draw();
	
	btnBc.onchange = function(){
		bc = btnBc.value;
		draw();
	}
	
	btnLc.onchange = function(){
		lc = btnLc.value;
		draw();
	}
	
	btnRa.onchange = function(){
		ra = btnRa.value;
		draw();
	}
	
	btnHo.onchange = function(){
		h = btnHo.value;
		draw();
	}
	
	btnRight.onclick = function(){
		if(btnRight.checked){
			d = false;
		}else{
			d = true;
		}
		draw();
	}

	
}

function draw(){
	ctx.clearRect(0, 0, 800, 600);
	ctx.lineWidth = 5;
	ctx.strokeStyle = lc;
	ctx.fillStyle = bc;
	
	ctx.shadowColor='rgb(100,100,100)';
	ctx.shadowOffsetX='5';
	ctx.shadowOffsetY='5';
	ctx.shadowBlur='25';
	
	ctx.beginPath();
		ctx.moveTo(400, 300);
		ctx.arc(400, 300, ra, 0, Math.PI* h, d);
		ctx.fill();
		
	ctx.closePath();
	ctx.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="800px" height="600px"></canvas>
<p/>
<label>선색</label>
<input type="color" id="lineColor">
<label>바탕색</label>
<input type="color" id="backColor">
<label>반지름</label>
<input type="range" id="radius" min="50" max="300" step="10">
<label>호의 길이</label>
<input type="range" id="ho" min="0" max="2" step="0.1">
<label>방향</label>
<p/>
<label><input type="checkbox" name="direct" id="right">반시계방향</label>
</body>
</html>
